<style lang="scss" scoped>
.class-score-list .item{
    width:30%;
    border-top: 7px solid $primary-color;
    h4{
        height: 42px;
    }
    .progress{
        width: 62%;
    }
    i{
        margin-right: 4px;
    }
}
</style>
<template>
    <div class="student">
        <div class="head border-radius bg-fff p-1 d-flex between">
            <div class="filters">
                <Tooltip content="输入后按回车确认">
                    <label >
                        <span>学号:</span>
                        <Input class="w150" v-model="filters.no" clearable @on-enter="getList_page(1)"></Input>
                    </label>
                </Tooltip>
                 <Tooltip content="输入后按回车确认">
                    <label >
                        <span>姓名:</span>
                        <Input class="w150" v-model="filters.name"  clearable @on-enter="getList_page(1)"></Input>
                    </label>
                </Tooltip>
                <label >
                    <span>其他班级:</span>
                   <Select class="w150" v-model="filters.cid" clearable @on-change="getList_page(1)">
                       <Option v-for="val in classList" :value="val.id" :key="val.id">{{val.name}}班</Option>
                   </Select>
                </label>
            </div>
            <Button type="primary" icon="ios-add-circle-outline" @click="handle_add">添加</Button>
        </div>
        <div class="content mt-1">
            <Table :columns="columns" class="diy_table" :data="list">
                <template slot-scope="{ row }" slot="handle">
                    <Button class="mr-1" @click="get_charts(row)">得分趋势图</Button>
                    <Button class="mr-1" @click="get_lessonDetails(row)">作业明细</Button>
                    <Button ghost type="primary" class="mr-1" @click="handle_edit(row)" >编辑</Button>
                    <Button ghost type="error" @click="handle_del(row)">删除</Button>
                </template>
            </Table>
            <div class="clearfix mt-2">
                <Page :current.sync="filters.page" :page-size="filters.list_rows" :total="total_page" show-sizer class="float-right" show-total @on-change="getList_page"/>
            </div>
        </div>
        <Modal v-model="scoreChartsShow" title="得分趋势图" class-name="diy-modal" width="800" :footer-hide="true">
            <Tabs class="mb-1">
                <TabPane label="历史成绩与正确率" name="1">
                    <line-charts style="height:400px" v-if="scoreChartsShow" :data="transcriptData" :attrs="lineChartsAttrs"/>
                </TabPane>
                <TabPane label="自评分总汇" name="2">
                    <radar-charts v-if="scoreChartsShow" :data="evaluationData"/>
                </TabPane>
            </Tabs>
        </Modal>
        
        <Modal v-model="lessonDetailsShow" title="作业详情" class-name="diy-modal" width="800" :footer-hide="true">
            <p class="py-1 color-666 font-12">点击作业后可查看答题详情</p>
            <div  class="class-score-list d-flex between wrap">
                <div class="item border p-1 border-radius mb-1 pointer" v-for="v in current.lessonDetails" :key="v.id" @click="getDetails(v.lid)">
                    <h4 class="substr-line-more">{{v.title}}</h4>
                    <div class="line-height-26">
                        <p><Icon class='color-t1' custom="iconfont icon-edit" />得分：{{v.total_score}}分</p>
                        <p><Icon class='color-t1' custom="iconfont icon-success"/>正确率：<Progress :percent="v.accuracy"  class="progress" /></p>
                        <p><Icon class='color-t1' custom="iconfont icon-percent"/>整体评价：<Rate disabled :value="current.evaluation['整体评价']" /></p>
                    </div>
                </div>
                
            </div>
        </Modal>
        <Modal v-model="updateShow" :title="updateUser.id?'修改学生':'新增学生'"  @on-ok="handle_save" class-name="diy-modal" >
            <Form :model="updateUser" :label-width="80">
                <FormItem label="学号">
                    <Input v-model="updateUser.no" class="w-200" ></Input>
                </FormItem>
                <FormItem label="姓名">
                    <Input v-model="updateUser.name" class="w-200"></Input>
                </FormItem>
                <FormItem label="密码">
                    <Input v-model="updateUser.pwd" type="password" class="w-200"></Input>
                    <span class="font-12 color-999 ml-1">为空则不更改密码</span>
                </FormItem>
                <FormItem label="所属班级">
                    <Select class="w-200" v-model="updateUser.cid">
                        <Option v-for="val in classList" :value="val.id" :key="val.id">{{val.name}}班</Option>
                    </Select>
                </FormItem>
                <FormItem label="性别">
                    <RadioGroup v-model="updateUser.sex">
                        <Radio :label="1">男</Radio>
                        <Radio :label="0">女</Radio>
                    </RadioGroup>
                </FormItem>
            </Form>
        </Modal>
    </div>
</template>
<script>
import pageMixin from "@/common/pageMixin"
import lineCharts from "@/components/lineCharts"
import radarCharts from "@/components/radarCharts"
import {student_list,student_edit,student_add,student_delete,student_trend} from "@/common/tapi"
import {store} from "@/store"
export default {
    mixins:[pageMixin],
    data(){
        return {
            lessonDetailsShow:false,
            current:{},
            updateShow:false,
            updateUser:{
                no:'',
                pwd:'',
                name:'',
                cid:0,
                sex:1
            },
            filters:{
                cid:0,
                name:'',
                no:''
            },
            evaluationData:[],
            transcriptData:[],
            lineChartsAttrs:{
                xAxis:{
                    axisLabel:{
                        show:false
                    }
                }
            },
            scoreChartsShow:false,
            columns:[
                {
                    title: '学号',
                    key: 'no'
                },
                {
                    title: '姓名',
                    key: 'name',
                    render:(h,params)=>{
                        return h('div',[
                            h('span',params.row.name),
                            h('Icon',{
                                props:{
                                    type:`md-${params.row.sex?'':'fe'}male`,
                                    size:'12',
                                    color:params.row.sex?'#3295CE':'#D5628D'
                                },
                                style:{
                                    marginLeft:'6px'
                                }
                            })
                        ])
                    }
                },
                {
                    title: '本门总分',
                    key: 'total_score'
                },
                {
                    title: '金币数',
                    key: 'gold'
                },
                // {
                //     title: '正确率',
                //     key: 'average_accuracy_class'
                // },
                {
                    title: '操作',
                    width:380,
                    slot: 'handle',
                    align: 'center'
                }
            ],
            list:[ ]
        }
    },
    methods:{
        getDetails(lid){
            this.lessonDetailsShow=false
            this.$router.push({name:'student_lesson_details',query:{sid:this.current.id,lid}})
        },
        async get_lessonDetails(row){
            if(!row.lessonDetails){
                const res=await student_trend({sid:row.id})
                row.lessonDetails=res.data.statics.trend
                row.evaluation=res.data.statics.evaluation
            }
            this.current=row
            this.lessonDetailsShow=true
        },
        getList(){
            student_list(this.filters)
            .then(res=>{
                if(res){
                    this.list=res.data.list
                }
            })
        },
        async get_charts(row){
            if(!row.lessonDetails){
                const res=await student_trend({sid:row.id})
                row.lessonDetails=res.data.statics.trend
                row.evaluation=res.data.statics.evaluation
            }

            const score={},accuracy={}
            row.lessonDetails.forEach(el => {
                score[el.title]=el.total_score
                accuracy[el.title]=el.accuracy
            });
            
            this.transcriptData.push({
                name:'分数',
                data:score
            })
            this.transcriptData.push({
                name:'正确率',
                data:accuracy
            })
            this.evaluationData=row.evaluation
            this.scoreChartsShow=true
        },
        handle_del(row){
            this.$Modal.confirm({
                title: '提示',
                content: `确认删除${row.name}吗？`,
                onOk: () => {
                    student_delete({sid:row.id})
                    .then(res=>{
                        if(res){
                            this.getList()
                            this.$Notice.success({
                                title: '提交成功',
                                desc:'删除成功'
                            });
                        }
                    })
                }
            });
        },
        handle_save(){
            const func=this.updateUser.id?student_edit:student_add
            func(this.updateUser)
            .then(res=>{
                if(res){
                    this.getList()
                    this.$Notice.success({
                        title: '提交成功',
                        desc:this.updateUser.id?'学生信息修改成功':'学生信息添加成功'
                    });
                }
            })
        },
        handle_add(){
            this.updateUser={
                no:'',
                pwd:'',
                name:'',
                cid:this.filters.cid,
                sex:1
            }
            this.updateShow=true
        },
        handle_edit(row){
            for (const key in this.updateUser) {
                this.updateUser[key]=row[key]
            }
            this.updateUser.pwd=''
            this.updateUser.id=row.id
            this.updateShow=true
        }
    },
    computed:{
        classList(){
            return store.classList
        }
    },
    components:{lineCharts,radarCharts},
    created(){
        this.filters.cid=+this.$route.query.cid
        this.getList_page()
    }
}
</script>